<template>
  <view>
    <view :style="{height: isFloat? '0px':topBar.height+'px'}">
      <view :style="{paddingTop: topBar.statusBarHeight+'px'}" v-if="topBar.style === 'custom'"
            :class="['top-bar', mode?mode:'white']">
        <view class="nav-bar1" :style="{height: topBar.navbarHeight+'px'}">
          <slot name="content">
            <view v-if="!leftHide" class="left-btn">
              <slot name="left">
                <image src="../static/black_back.png" v-if="hasBackBtn" mode="widthFix" class="back"
                       @click="toBack"></image>
                <image src="../static/black_home.png" v-else mode="widthFix" class="home" @click="toHome"></image>
              </slot>
            </view>
            <text class="title" @click="refreshTitle">{{ title || appName }}</text>
          </slot>
        </view>
      </view>
    </view>
    <slot name="bottom"></slot>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'

export default {
  name: 'navbar',
  props: ['title', 'mode', 'leftHide', 'float'],
  data() {
    return {
      hasBackBtn: true
    }
  },
  options: {
    styleIsolation: "shared"
  },
  computed: {
    ...mapGetters(['topBar', 'appName']),
    isFloat() {
      if (this.float) {
        return true
      }

      return this.topBar.style !== 'custom'
    },
    titleStr() {
      if (this.title) {
        return this.title
      }
      return this.appName
    }
  },
  mounted() {
    this.refreshTitle()

    this.hasBackBtn = this.haveBackBtn()
  },
  watch: {
    titleStr(newVal) {
      // console.log('setNavigationBarTitle133', newVal, this.appName)
      uni.setNavigationBarTitle({title: newVal})
    }
  },
  methods: {
    toBack() {
      uni.navigateBack()
    },
    haveBackBtn() {
      return getCurrentPages().length > 1
    },
    toHome() {
      uni.reLaunch({url: '/pages/home/home'})
    },
    refreshTitle() {
      // console.log('setNavigationBarTitle12', this.title, this.appName)
      uni.setNavigationBarTitle({
        title: this.titleStr
      })
    }
  }
}
</script>

<style lang='scss'>
.top-bar {
  &.white {
    background-color: #fff;
  }

  &.transparent {
    background-color: transparent;
    color: #fff;
  }

  //background-color: #ff00ff;
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 1;

  .nav-bar1 {
    display: flex;
    padding: 0 30upx;
    //background-color: #0f0;
    .left-btn {
      width: 60upx;
      display: flex;
      align-items: center;
    }

    .back {
      width: 36upx;
      height: 36upx;
    }

    .home {
      width: 50upx;
      height: 50upx;
    }

    .title {
      font-size: 16px;
      font-weight: bold;
      display: flex;
      align-items: center;
    }
  }
}
</style>
